@import '_var';
.container{
    width: 1000px;
    margin: 0 auto;
    // padding: 0;
}
.banner{
    img{
        width: 100%;
        height: 500px;
    }
}
.gray{
    @include bgc;
}
.title{
    .container{
        position: relative;
        padding-top: 30px;
        padding-bottom: 60px;
        .bigtitle{
            @include fontBase(30,gray);
            width:100%;
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid transparent;
            border-color: map-get($map: $color, $key: lightgray);
            position: relative;
            &::after{
                content: "";
                width: 25%;
                height: 0;
                border-bottom: 1px solid map-get($map: $color, $key: gray);
                position: absolute;
                left: 375px;
                bottom: -1px;
            } 
        }
        .smalltitle{
            width: 115px;
            height: 24px;
            line-height: 24px;
            background-color: map-get($map: $color, $key: white);
            @include fontBase(18,gray);
            position: absolute;
            bottom: 50px;
            left: 457px;
        }
        .gray{
            @include bgc;
        }
    }
}
.idea{
    margin-top: 20px;
    .container{
        .ideaimg{
            width: 95px;
            height: 95px;
            margin: 0 auto;
            background-color: map-get($map: $color, $key: lightgreen);
            border-radius: 10px;
            margin-bottom: 40px;
            @for $num from 1 to 4 {
                .img#{$num}{
                    width: 95px;
                    height: 95px;
                    background: url(../images/index/index_concept_#{$num}.png);
                }
            }
        }
        .ideatitle{
            @include fontBase(18,deepgray);
            margin-bottom: 25px;
        }
        .ideatext{
            @include fontBase(12,gray);
        }
        
    }
}
.introduce{
    margin-top: 120px;
    margin-bottom: 50px;
    .container{
        .introducebox{
            width: 170px;
            height: 195px;
            margin-left: 45px;
            border: 1px solid map-get($map: $color, $key: gray);
            position: relative;
            p{
                @include fontBase(24,gray);
                margin-top: 55px;
                &:last-child{
                    @include fontBase(18,gray);
                    width: 60px;
                    height: 55px;
                    margin:  0 auto;
                    border-bottom: 3px solid map-get($map: $color, $key: gray);
                }
            }
            a{
                display: inline-block;
                margin: 0;
                padding: 0;
                width: 40px;
                height: 40px;
                @include fontBase(30,white);
                line-height: 40px;
                background-color: map-get($map: $color, $key: gray);
                position: absolute;
                left: -20px;
                top: 80px;
                &:first-child{
                    left: -60px;
                }
            }
        }
        .centertext{
            @include fontBase(12,gray);
            margin-top: 40px;
            line-height: 25px;
        }
        img{
            width: 280px;
            height: 160px;
            margin-top: 18px;
        }
        .more{
            width: 60px;
            height: 24px;
            background-color: map-get($map: $color, $key: lightgreen);
            border: none;
            border-radius: 7px;
            @include fontBase(12,white);
        }
    }
}
.product{
    @include bgc;
    .container{
        width: 860px;
        .productbox{
            >*{
                padding: 0;
            }
            .setimg1{
                width: 398px;
            }
            .setimg2{
                width: 199px;
            }
            .chtitle{
                margin-top: 25px;
                margin-bottom: 10px;
                @include fontBase(18,deepgreen);
            }
            .chinfo{
                margin-bottom: 10px;
                @include fontBase(16,deepgreen);
            }
            .english{
                margin-bottom: 10px;
                @include fontBase(10,deepgreen);
            }
            p{
                padding-left: 15px;
                margin: 0;
            }
            .special{
                padding: 0;
            }
            .top{
                margin-top: 60px;
            }
            .bottom{
                margin-bottom: 30px;
            }
            .productimg4{
                width: 416px;
                height: 255px;
            }
            .productimg5{
                position: relative;
                .greenbutton{
                    width: 135px;
                    height: 40px;
                    background-color: map-get($map: $color, $key: lightgreen);
                    @include fontBase(16,white);
                    line-height: 40px;
                    border: none;
                    position: absolute;
                    left: 30px;
                    bottom: 15px;
                }
            }
            .info{
                position: relative;
                .caret{
                    border-color: map-get($map: $color, $key: bg) transparent transparent transparent;
                    border-width: 10px 12px;
                    position: absolute;
                }
                .toleft{
                    transform: rotate(90deg);
                    left: -19px;
                    top: 25px;
                }
                .tobottom{
                    // transform: rotate(90deg);
                    right: 30px;
                    bottom: -40px;
                }
                .totop1{
                    transform: rotate(180deg);
                    left: 30px;
                    top: 245px;
                }
                .totop2{
                    transform: rotate(180deg);
                    left: 25px;
                    top: -35px;
                }
            }
        }
    }
}
.news{
    padding-bottom: 90px;
    .container{
        .newsbox{
            &:hover{
                background-color: map-get($map: $color, $key: lightgreen);
            }
            &:hover p{
                color: map-get($map: $color, $key: white);
            }
            &:hover .left{
                border-color: map-get($map: $color, $key: white);
            }
            margin-bottom: 40px;
            
            
        }
        p{
            margin: 0;
        }
        .left{
            height: 50px;
            border-right: 1px solid map-get($map: $color, $key: lightgray);
            margin: 15px 0 15px 0;
            .date{
                @include fontBase(24,black);
            }
            .year{
                @include fontBase(18,black);
            }
            p{
                text-indent: 10px;
            }
            
        }
        .newstitle{
            @include fontBase(16,black);
            margin-top: 8px;
            margin-bottom: 12px;
        }
        .newsinfo{
            @include fontBase(12,black);
        }
        .more{
            width: 100px;
            height: 35px;
            margin: 0 auto;
            border: none;
            border-radius: 12px;
            line-height: 35px;
            background-color: map-get($map: $color, $key: lightgreen);
            @include fontBase(14,white);
        }
    }
}
@each $key in map-keys($viewports){
    @media (min-width: map-get($viewports, $key) )and(max-width:991px) {
        .container {
            width: map-get($viewports, $key);
        }
        @if $key==4 {
            .product .container{
                width: 597px;
            }
            .title .container .smalltitle{
                left: 43%;
            }
        }
        @if $key<=3 {
            .product .container{
                width: 320px;
            }
        }
        @if $key==2 {
            .title .container .smalltitle{
                left: 35%;
            }
        }
        @if $key==1 {
            .title .container .bigtitle::after{
                left: 37.5%;
            }
            .title .container .smalltitle{
                left: 32%;
            }
        }
    }
}